<template>
	<view class="index-header">
		<view class="index-header-box">
			<view class="menu-header">
			<menu-header>
				<!-- #ifdef MP-WEIXIN -->
				<view
					class="header-location main-flex"
					@click="goSite"
					v-if="userStore.mode === 2">
					<uni-icons type="location-filled" size="20" :color="page?.style?.titleTextColor || '#333333'"></uni-icons>
					<view class="header-location-text" :style="{color: page?.style?.titleTextColor}">自提点</view>
				</view>
				<view
					class="header-location"
					v-else>
					<choose-province
						:color="page?.style?.titleTextColor"
						v-model="regionCode"
						@change="changeProvince">
						<template v-slot:prefix>
							<uni-icons type="location-filled" size="20" :color="page?.style?.titleTextColor || '#333333'"></uni-icons>
						</template>
					</choose-province>
				</view>
				<!-- #endif -->
			</menu-header>
			</view>
			<view class="index-header-box-search main-flex">
				<view class="logo main-flex">
					<image v-if="page?.params?.titleType === 'image'" mode="aspectFill" class="logo-img" :src="imgUrl(page?.params?.shareImg)"></image>
					<view v-else class="logo-title" :style="{color: page?.style?.titleTextColor}">{{page?.params?.title || '廷与食材'}}</view>
				</view>
				<view class="search main-flex-item" :style="{ height: `${setStore?.menuButton?.height || 0}px`}">
					<view class="search-box main-flex" @click="goSearch">
						<uni-icons type="search" size="18"></uni-icons>
						<view class="search-text main-flex-item">
							<search-words @change="changeWord"></search-words>
						</view>
						<view class="search-btn main-flex">搜索</view>
					</view>
				</view>
				<!-- #ifndef MP-WEIXIN -->
				<view class="menu-header">
					<view class="header-location main-flex" @click="goSite" v-if="userStore.mode === 2">
						<uni-icons type="location-filled" size="20" :color="page?.style?.titleTextColor || '#333333'"></uni-icons>
						<view class="header-location-text" :style="{color: page?.style?.titleTextColor}">自提点</view>
					</view>
					<view class="header-location" v-else>
						<choose-province
							v-model="regionCode"
							:color="page?.style?.titleTextColor"
							@change="changeProvince">
							<template v-slot:prefix>
								<uni-icons type="location-filled" size="20" :color="page?.style?.titleTextColor || '#333333'"></uni-icons>
							</template>
						</choose-province>
					</view>
				</view>
				<!-- #endif -->
			</view>
			<scroll-view class="index-tabs" scroll-x direction="horizontal" v-if="page?.category?.open === 1">
				<view class="index-tabs-list main-flex">
					<view
						class="index-tabs-item"
						:style="{color: page?.category?.color}"
						@click="goCategory(item)"
						v-for="item in categoryList"
						:key="item.id">{{item.name}}</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
  /**
   * IndexHeader 首页头部
   * @description 首页头部
   */
	import { computed, onMounted, ref, watch } from "vue"
	import { allProvince } from "@/api/app_api/index"
	import useUserStore from "@/store/modules/user"
	import useSetStore from "@/store/modules/set"
	
	const userStore = useUserStore()
	const setStore = useSetStore()
	
	const props = defineProps({
		page: {
			type: Object,
			default: () => {}
		}
	})
	
	// // 页面设置
	// const menuButton = computed(() => {
	// 	let height = 32
	// 	// #ifdef MP-WEIXIN
	// 	const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
	// 	if (menuButtonInfo) {
	// 		height = menuButtonInfo.height
	// 	}
	// 	// #endif
	// 	return {
	// 		height
	// 	}
	// })
	
	// 选择区域
	const regionCode = ref(userStore?.regionCode || '')
	const changeProvince = (e) => {
		if (e) {
			regionCode.value = e.code
			userStore.changeProvince(e.code)
		}
	}
	
	watch(() => userStore.regionCode, (nVal, oVal) => {
		if (nVal) {
			regionCode.value = nVal
		}
	})
	
	const word = ref('')
	const changeWord = (e) => {
		word.value = e
	}
	
	// 跳转到搜索页面
	const goSearch = () => {
		uni.navigateTo({
			url: word.value ? `/pages/goods/search?word=${word.value}` : '/pages/goods/search'
		})
	}
	
	// 跳转到分类
	const goCategory = (row) => {
		userStore.categoryId = row.id
		uni.switchTab({
			url: '/pages/category/category'
		})
	}
	
	const categoryList = ref([])
	userStore.getCategory().then(res => {
		categoryList.value = res
	})
	
	// 选择自提点
	const goSite = () => {
		uni.navigateTo({
			url: '/pages/site/site'
		})
	}
</script>

<style lang="scss" scoped>
  .index-header {
		&-box {
			padding-bottom: 10rpx;
			&-search {
				padding: 0 20rpx;
				margin-top: 10rpx;
				.logo {
					&-img {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
					}
					&-title {
						font-size: 32rpx;
						color: $text-dark;
					}
				}
				.search {
					margin-left: 20rpx;
					&-box {
						width: 100%;
						height: 100%;
						background-color: #ffffff;
						border-radius: 100rpx;
						border: 1px solid $primary-color;
						padding: 4rpx 4rpx 4rpx 20rpx;
						box-sizing: border-box;
					}
					&-text {
						height: 100%;
						font-size: 24rpx;
						color: $text-placeholder;
						margin-left: 10rpx;
						padding-right: 20rpx;
					}
					&-btn {
						height: 100%;
						font-size: 24rpx;
						text-align: center;
						justify-content: center;
						color: #ffffff;
						background-color: $primary-color;
						border-radius: 100rpx;
						padding: 0 30rpx;
					}
				}
			}
		}
		.index-tabs {
			height: 40rpx;
			white-space: nowrap;
			margin-top: 10rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			&-item {
				font-size: 28rpx;
				line-height: 40rpx;
				margin-right: 20rpx;
			}
		}
	}
	.menu-header {
		padding-left: 20rpx;
	}
	.header-location {
		&-box {
			font-size: 14px;
		}
		&-text {
			color: $text-dark;
		}
		&-placeholder {
			color: $text-dark;
		}
	}
</style>
